<template>
	<view>
		<view class="header">
			<view class="content">
				<view class="row">
					<view class="up">订单编号:</view>
					<view class="text">{{orderId}}</view>
				</view>
				<view class="row">
					<view class="down">订单金额:</view>
					<view class="text">{{price/100}}元</view>
				</view>
			</view>
		</view>
		<view class="middle">
			<view class="title">
				选择支付方式
			</view>
			<view class="content">
				<view class="pay-list">
					<view class="row" @tap="paytype='alipay'">
						<view class="left">
							<image src="/static/icons/alipay.png" mode=""></image>
						</view>
						<view class="center">
							支付宝支付
						</view>
						<view class="right">
							<radio :checked="paytype=='alipay'" color="#354E44"></radio>
						</view>
					</view>
					<view class="row" @tap="paytype='wxpay'">
						<view class="left">
							<image src="/static/icons/wxpay.png" mode=""></image>
						</view>
						<view class="center">
							微信支付
						</view>
						<view class="right">
							<radio :checked="paytype=='wxpay'" color="#354E44"></radio>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="pay">
			<view class="btn" @tap="doDeposit">立即支付</view>
			<view class="tis">
				点击立即支付，即代表您同意<view class="terms">
					《条款协议》
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import orderApi from '@/api/order/index.js'
	import NP from 'number-precision'
	export default {
		data() {
			return {
				amount: 0,
				orderId: '',
				price: 0,
				paytype: 'alipay'
			}
		}, 
		computed: {
			orderInfo() {
				return this.$store.state.order.tempOrder;
			}
		},
		onLoad(e) {
			this.amount = NP.round(e.price, 2);
			this.price = this.amount;
			this.orderId = e.orderId;
		},
		methods: {
			doDeposit() {
				//模拟支付（实际情况下调用支付宝或者微信）
				uni.showLoading({
					title:'支付中...'
				});
				//支付
				orderApi.payConfirm({
					userId:this.$store.getters.userId,
					orderId:this.orderId,
					paytype:this.paytype
				}).then(res=>{
					if(res.code == 'S'){
						setTimeout(()=>{
							uni.hideLoading();
							uni.showToast({
								title:'支付成功'
							});
							setTimeout(()=>{
								uni.redirectTo({
									url:'../success/success?price='+this.price
								});
							},300);
						},700)
					}else{
						uni.showToast({
							title:'支付失败!'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 94%;
		padding: 0 20rpx;

		.content {
			width: 100%;
			border-bottom: 1px solid #C0C0C0;

			.row {
				width: 100%;
				height: 90rpx;
				display: flex;
				align-items: center;

				.up,
				.down {
					margin-right: 40rpx;
					font-size: 30rpx;
					color: #7d7d7d;
					flex-shrink: 0;
				}

				.text {
					width: 70%;
					margin-left: 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 32rpx;
				}
			}
		}
	}

	.middle {
		width: 94%;
		padding: 30rpx 20rpx;

		.title {
			width: 100%;
			font-size: 34rpx;
		}

		.content {
			width: 100%;
			border-bottom: 1px solid #C0C0C0;

			.pay-list {
				width: 100%;

				.row {
					width: 100%;
					height: 120upx;
					display: flex;
					align-items: center;

					.left {
						width: 100upx;
						flex-shrink: 0;
						display: flex;
						align-items: center;

						image {
							width: 80upx;
							height: 80upx;
							background-color: transparent;
							border-radius: 50%;
						}
					}

					.center {
						width: 100%;
						font-size: 30upx;
					}

					.right {
						width: 100upx;
						flex-shrink: 0;
						display: flex;
						justify-content: flex-end;
					}
				}
			}
		}
	}

	.pay {
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;

		.btn {
			width: 70%;
			height: 80upx;
			border-radius: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			background-color: #354E44;
			box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.2);
		}

		.tis {
			margin-top: 10upx;
			width: 100%;
			font-size: 24upx;
			display: flex;
			justify-content: center;
			align-items: baseline;
			color: #999;

			.terms {
				color: #5a9ef7;
			}
		}
	}
</style>
